<template>
	<view>
		<view>
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view style="display: inline-block;" class="cu-item flex-sub" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in navTab"
					 :key="index" @tap="tabSelect" :data-id="index">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="TabCur == 0">
			<view v-if="isHaveCheckingList">
				<view class="bg-white margin-sm padding-sm solids-bottom shadow radius text-content">
					<view v-for="(item,index) in curseCheckingList" :key="index">
						<view class="bg-white margin-xs padding-xs shadow radius text-content">
							<view class="flex padding-top-sm solids-top">
								<view class="flex text-content padding-left justify-between" style="flex-grow:1;">
									课程名：{{ item.curseName }}
								</view>
							</view>
							<view class="flex padding-top-sm solids-top">
								<view class="flex text-content padding-left justify-between" style="flex-grow:1;">
									开课时间：{{ item.starttime }}
								</view>
							</view>
						</view>
						<view class="flex justify-end" style="font-size: 24upx;">
							<button @click.stop="showCurseDetail(item.curseId)" class="round lines-grey cu-btn shadow mid margin-right-sm">课程详情</button>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!isHaveCheckingList">您没有待审核的课程</view>
		</view>
		<view v-if="TabCur == 1">
			<view v-if="isHaveNotPassList">
				<view class="bg-white margin-sm padding-sm solids-bottom shadow radius text-content">
					<view v-for="(item,index) in curseNotPassList" :key="index">
						<view class="bg-white margin-xs padding-xs shadow radius text-content">
							<view class="flex padding-top-sm solids-top">
								<view class="flex text-content padding-left justify-between" style="flex-grow:1;">
									课程名：{{ item.curseName }}
								</view>
							</view>
							<view class="flex padding-top-sm solids-top">
								<view class="flex text-content padding-left justify-between" style="flex-grow:1;">
									未通过原因：{{ item.curseNotPassReason }}
								</view>
							</view>
						</view>
						<view class="flex justify-end" style="font-size: 24upx;">
							<button @click.stop="editCourse(item.curseId)" class="round lines-grey cu-btn shadow mid margin-right-sm">编辑课程</button>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!isHaveNotPassList">您发布的课程均已通过审核</view>
		</view>
		<view v-if="TabCur == 2">
			<view v-if="isWaitStartList">
				<view class="bg-white margin-sm padding-sm solids-bottom shadow radius text-content">
					<view v-for="(item,index) in curseWaitStartList" :key="index">
						<view class="bg-white margin-xs padding-xs shadow radius text-content">
							<view class="flex padding-top-sm solids-top">
								<view class="flex text-content padding-left justify-between" style="flex-grow:1;">
									课程名：{{ item.curseName }}
								</view>
							</view>
							<view class="flex padding-top-sm solids-top">
								<view class="flex text-content padding-left justify-between" style="flex-grow:1;">
									开课时间：{{ item.starttime }}
								</view>
							</view>
						</view>
						<view class="flex justify-end" style="font-size: 24upx;">
							<button @click.stop="findStudentByCurseId(item.curseId)" class="round lines-grey cu-btn shadow mid margin-right-sm">查看学员</button>
							<button @click.stop="showCurseDetail(item.curseId)" class="round lines-grey cu-btn shadow mid margin-right-sm">课程详情</button>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!isWaitStartList">您还没有等待开课的课程</view>
		</view>
		<view class="list" v-if="TabCur == 3">
			<view v-if="isHaveDoingList">
				<view class="bg-white margin-sm padding-sm solids-bottom shadow radius text-content">
					<view v-for="(item,index) in curseDoingList" :key="index">
						<view class="bg-white margin-xs padding-xs shadow radius text-content">
							<view class="flex padding-top-sm solids-top">
								<view class="flex text-content padding-left justify-between" style="flex-grow:1;">
									课程名：{{ item.curseName }}
								</view>
							</view>
							<view class="flex padding-top-sm solids-top">
								<view class="flex text-content padding-left justify-between" style="flex-grow:1;">
									开课时间：{{ item.starttime }}
								</view>
							</view>
						</view>
						<view class="flex justify-end" style="font-size: 24upx;">
							<button @click.stop="findStudentByCurseId(item.curseId)" class="round lines-grey cu-btn shadow mid margin-right-sm">查看学员及课程进度</button>
							<button @click.stop="showCurseDetail(item.curseId)" class="round lines-grey cu-btn shadow mid margin-right-sm">课程详情</button>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!isExistDayWorkPlan">您没有正在进行中的课程</view>
		</view>
		<view class="list" v-if="TabCur == 4">
			<view v-if="isExistDayWorkPlan">
				<view class="bg-white margin-sm padding-sm solids-bottom shadow radius text-content">
					<view v-for="(item,index) in dayWorkPlanList" :key="index">
						<view class="bg-white margin-xs padding-xs shadow radius text-content">
							<view class="flex padding-top-sm solids-top">
								<view class="flex text-content padding-left justify-between" style="flex-grow:1;">
									课程名：{{ item.curseName }}
								</view>
							</view>
							<view class="flex padding-top-sm solids-top">
								<view class="flex text-content padding-left justify-between" style="flex-grow:1;">
									上课时间：{{ item.time }}
								</view>
							</view>
							<view class="flex padding-top-sm solids-top">
								<view class="flex text-content padding-left justify-between"
								 style="flex-grow:1;" v-if="item.curseStatus==0">
									课程状态：等待上课
								</view>
								<view class="flex text-content padding-left justify-between"
								 style="flex-grow:1;" v-if="item.curseStatus==1">
									课程状态：课程进行中
								</view>
								<view class="flex text-content padding-left justify-between"
								 style="flex-grow:1;" v-if="item.curseStatus==2">
									课程状态：已结课
								</view>
							</view>
						</view>
						<view class="flex justify-end" style="font-size: 24upx;">
							<button @click.stop="findCursePlanByCursePlanId(item.cursePlanId)" class="round lines-grey cu-btn shadow mid margin-right-sm">课程详情</button>
							<button @click.stop="finishCursePlan(item.cursePlanId,index)" v-if="item.curseStatus==1" class="round lines-grey cu-btn shadow mid margin-right-sm">结课</button>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!isExistDayWorkPlan">您今天没有课程安排</view>
		</view>
	</view>
</template>

<script>
	import sTabs from '@/s-ui/s-tabs';
	import sTab from '@/s-ui/s-tab';
	import base from '@/common/base.js'
	export default {
		components: {
			sTabs,
			sTab
		},
		data() {
			return {
				curseCheckingList: [],
				dayWorkPlanList: [],
				curseDoingList: [],
				curseNotPassList: [],
				curseWaitStartList: [],
				isHaveCheckingList: true,
				isExistDayWorkPlan: true,
				isHaveDoingList: true,
				isHaveNotPassList: true,
				isWaitStartList: true,
				activeTab: 0,
				TabCur: 0,
				navTab: [{
					name: "待审核"
				}, {
					name: "未通过"
				}, {
					name: "等待开课"
				}, {
					name: "进行中"
				}, {
					name: "今日课程"
				}],
			};
		},
		onLoad() {
			this.getCheckingList();
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				console.log("当前页:" + e.currentTarget.dataset.id);
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 30;
				this.getDataForTab();
			},
			getDataForTab() {
				if (this.TabCur == 0) {
					this.getCheckingList();
				} else if (this.TabCur == 1) {
					this.getNotPassCourseList();
				} else if (this.TabCur == 2) {
					this.getWaitStarList();
				} else if (this.TabCur == 3) {
					this.getDoingCourseList();
				} else {
					this.getDayWorkPlanList();
				}
			},
			findStudentByCurseId(curseId) {
				uni.navigateTo({
					url: "/pages/user/student/studentList?curseId=" + curseId
				})
			},
			findCursePlanByCursePlanId(cursePlanId) {
				uni.navigateTo({
					url: "/pages/user/course/showCursePlanDetail?cursePlanId=" + cursePlanId
				})
			},
			finishCursePlan(cursePlanId,index) {
				uni.request({
					url: base.urlPrefix + "yoga_app/curse-plan/coachUploadCursePlanFinishRequest",
					data: {
						cursePlanId: cursePlanId
					},
					success: (res) => {
						if (res.data.object == 2) {
							uni.showModal({
								content: '您确定要提交吗？',
								success: (res) => {
									if (res.confirm) {
										uni.request({
											url: base.urlPrefix + "yoga_app/curse-plan/coachUpdateCursePlanStatus",
											data: {
												cursePlanId: cursePlanId
											},
											success: (res) => {
												this.dayWorkPlanList[index].curseStatus=2;
											}
										})
									}
								}
							});
						} else {
							this.dayWorkPlanList[index].curseStatus=2;
						}
					}
				})
			},
			editCourse(curseId) {
				base.isEditingNotPassCurse = true;
				uni.navigateTo({
					url: "/pages/user/course/editNotPassCurseBaseMessage?curseId=" + curseId
				})
			},
			getNotPassCourseList() {
				uni.request({
					url: base.urlPrefix + "yoga_app/curse/coachGetNotPassCurseListByCoachId",
					data: {
						coachId: base.coach.coachId
					},
					success: (res) => {
						if (res.data.code == "success") {
							this.curseNotPassList = res.data.list;
						} else {
							this.isHaveNotPassList = false;
						}
					}
				})
			},
			getCheckingList() {
				uni.request({
					url: base.urlPrefix + "yoga_app/curse/coachGetCheckingCurseListByCoachId",
					data: {
						coachId: base.coach.coachId
					},
					success: (res) => {
						if (res.data.code == "success") {
							this.curseCheckingList = res.data.list;
							console.log("待审核的列表长度" + this.curseCheckingList.length);
						} else {
							this.isHaveCheckingList = false;
						}
					}
				});
			},
			getDoingCourseList() {
				uni.request({
					url: base.urlPrefix + "yoga_app/curse/coachGetDoingCurseListByCoachId",
					data: {
						coachId: base.coach.coachId
					},
					success: (res) => {
						if (res.data.code == "success") {
							this.curseDoingList = res.data.list;
							console.log("正在进来中的长度" + this.curseDoingList.length);
						} else {
							this.isHaveDoingList = false;
						}
					}
				});
			},
			showCurseDetail(curseId) {
				uni.navigateTo({
					url: "/pages/user/course/showCurseDetail?curseId=" + curseId
				})
			},
			getDayWorkPlanList() {
				uni.request({
					url: base.urlPrefix + "yoga_app/curse-plan/coachGetDayWorkPlanListByCoachId",
					data: {
						coachId: base.coach.coachId
					},
					success: (res) => {
						if (res.data.code == "success") {
							this.dayWorkPlanList = res.data.list;
						} else {
							this.isExistDayWorkPlan = false;
						}
					}
				});
			},
			getWaitStarList() {
				uni.request({
					url: base.urlPrefix + 'yoga_app/curse/coachGetWaitStartCurseListByCoachId',
					data: {
						coachId: base.coach.coachId
					},
					success: (res) => {
						if (res.data.code == "success") {
							this.curseWaitStartList = res.data.list;
							console.log(this.curseWaitStartList.length);
						} else {
							this.isWaitStartList = false;
						}

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tit {
		overflow: hidden;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		width: 25%;
		position: relative;
		left: 10rpx;
	}

	.tit1 {
		overflow: hidden;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		width: 30%;
		position: relative;
		left: 45rpx;
	}

	.tit2 {
		overflow: hidden;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		width: 45%;
		position: relative;
		left: 55rpx;
	}

	.tit3 {
		overflow: hidden;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		width: 30%;
		position: relative;
		left: 55rpx;
	}

	.tit4 {
		overflow: hidden;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		width: 30%;
		position: relative;
		left: 95rpx;
	}

	.Index-Page {
		.s-tab-wrap {
			height: 600rpx;
			padding: 40rpx;
			font-size: 28rpx;
		}
	}

	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	/* 弹性盒子允许换行 */
	.flex_col.flex_wrap {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	/* 列表 */
	.list {
		background-color: #fff;
		font-size: 28upx;
		color: #333;
		user-select: none;
		touch-callout: none;

		&>view {
			padding: 24upx 30upx;
			position: relative;

			&:active,
			&.active {
				background-color: #f3f3f3;
			}

			image {
				height: 80upx;
				width: 80upx;
				border-radius: 4px;
				margin-right: 20upx;
			}

			&>view {
				line-height: 40upx;

				.info {
					color: #999;
					font-size: 24upx;
				}

				.time {
					width: 150upx;
					text-align: right;
				}

				.info {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		&>view:not(:first-child) {
			margin-top: 1px;

			&::after {
				content: '';
				display: block;
				height: 0;
				border-top: #CCC solid 1px;
				width: 620upx;
				position: absolute;
				top: -1px;
				right: 0;
				transform: scaleY(0.5);
				/* 1px像素 */
			}
		}
	}

	/* 遮罩 */
	.shade {
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;

		.pop {
			position: fixed;
			z-index: 101;
			width: 200upx;
			box-sizing: border-box;
			font-size: 28upx;
			text-align: left;
			color: #333;
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			line-height: 80upx;
			transition: transform 0.15s ease-in-out 0s;
			user-select: none;
			-webkit-touch-callout: none;
			transform: scale(0, 0);

			&.show {
				transform: scale(1, 1);
			}

			&>view {
				padding: 0 20upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				user-select: none;
				-webkit-touch-callout: none;

				&:active {
					background-color: #f3f3f3;
				}
			}
		}
	}
</style>
